<script lang="ts" setup>
function handleContainerClick() {
  console.log("外部容器被点击");
}
function handleButtonClick(event: MouseEvent) {
  console.log("按钮被点击，事件冒泡被阻止");
  // 可以在这里访问 event 对象
}
function handleFormSubmit(event: Event) {
  console.log("表单提交，默认行为被阻止");
  // 可以在这里执行表单提交的逻辑，而不会刷新页面
}
</script>
<template>
  <div class="container" @click="handleContainerClick">
    <h2>事件修饰符示例</h2>
    <button @click.stop="handleButtonClick">点击我（阻止冒泡）</button>
    <form @submit.prevent="handleFormSubmit">
      <button type="submit">提交表单（阻止默认行为）</button>
    </form>
    <p>点击按钮不会触发外部容器的点击事件（由于 .stop 修饰符）。</p>
    <p>提交表单不会刷新页面（由于 .prevent 修饰符）。</p>
  </div>
</template>
<style scoped>
.container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-top: 20px;
}
button {
  margin-right: 10px;
  padding: 5px 10px;
  margin: 0 0 20px 0;
}
</style>
